<template>
	<view>
		<!-- <template>
			<view class="blank_cart">
			<text>购物车为空</text>
			<button style="color: white; background-color: black;">去下单</button>
			</view>
		</template> -->
    <my-status></my-status>
	<back-icon :backTopMargin="backTopMargin" :backHeight="backHeight"></back-icon>
	<view class="content">
		<view class="checkbox">
			<view style="display: flex;">
				<checkBox @click="updateAllGoodsState"></checkBox>
				<text style="font-size: 38rpx;">全选</text>
			</view>
				<text>清空购物车</text>
		</view>
		<good-info v-for="(item,index) in goodsList" :key="index" :good="item">
			<template #radio>
				<checkBox :item="item"></checkBox>
			</template>
			<template #num-box>
				<view class="num">
					<image src="../../static/cart-img/sub.png" mode="aspectFit" @click="sub(index)"></image>
					<view>{{item.number}}</view>
					<image src="../../static/cart-img/add.png" mode="aspectFit" @click="add(index)"></image>
				</view>
			</template>
		</good-info>	
		
		
	<!-- 底部 -->
		<view class="botton-box" >
			<text>&yen;{{orderPrice}}</text>
			<text style="font-size: 10px; font-weight: 200;">(不含运费)</text>
			<button @click="toOrder">购物车结算</button>
		</view>
	</view>
</view>
</template>

<script>
	import {mapState,mapMutations} from "vuex"
	import goodApi from "@/apis/goodApi.js"
  export default {
    data() {
      return{ 
		  backTopMargin:0,
		  backHeight:0,
		  goodsList:[]
      }
    },
	computed:{
		...mapState('cart',['orderPrice'])
	},
	onLoad() { 
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		// console.log(menuButtonInfo)
		this.backTopMargin = menuButtonInfo.top
		this.backHeight = menuButtonInfo.height
	},
	methods:{
		...mapMutations("cart",["sumPrice"]),
		async sub(index){
			this.goodsList[index].number--
			const cart = uniCloud.importObject("cart")
			await cart.changeGoodsNumber({
				"id":this.goodsList[index].goods_id,
				"number":this.goodsList[index].number
			})
			const {data:res} = await cart.getGoodsInfo()
				this.goodsList = res
			// if(this.goodsList[index].number>0){
			// this.goodsList[index].number--}
			// if(number === 0){
				
			// }
		},
		
		
		async add(index){
			this.goodsList[index].number++
			const cart = uniCloud.importObject("cart")
			await cart.changeGoodsNumber({
				"id":this.goodsList[index].goods_id,
				"number":this.goodsList[index].number
			})
			
		},
		toOrder(){
			uni.navigateTo({
				url:'/cart/cart-info/cart-info'
			})
		},
		async getGoods(){
			const cart = uniCloud.importObject("cart")
			const {data:res} = await cart.getGoodsInfo()
			// console.log(res)
			this.goodsList = res
		},
		
		
	},
	created() {
		this.getGoods()
	}
}
  
</script>

<style lang="scss" scoped>
.content{
	width: 100%;
	position: absolute;
	top: 10%;
	.checkbox{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		text{
			display: block;
			font-size:18px;
			font-weight: 200;
		}
	}
	.botton-box{
		width: 100%;
		height: 200rpx;
		display: flex;
		padding: 0px 10px;
		box-sizing: border-box;
		position: fixed;
		bottom: 5px;
		align-items: center;
		button{
			width: 250rpx;
			margin-right:20px ;
			background-color: black;
			border-radius: 0;
			color: white;
			font-size: 14px;
		}
	}
	.num{
		width: 20%;
		height: 25%;
		display: flex;
		position: absolute;
		right: 5rpx;
		bottom: 10rpx;
		flex:3;
		justify-content: space-between;
		border: 1rpx solid black;
		border-radius: 8px ;
		padding: 1px 12rpx;
		box-sizing: border-box;
		font-size: 18px;
		image{
			height: 45rpx;
			width: 40rpx;
		}
	}	
}

</style>
